<template>
  <div class="dayWinningDetails hideScrollBar">
    <div class="dayWinningDetails-bg"></div>
    <ClientOnly>
      <!-- 导航 -->
      <NavBar
        :title="t('lotteryMoney.zjxq')"
        isFixed
        isTransparent
        :isShadow="false"
        @getNavBarHeight="(h) => (pageData.navBarHeight = h)"
      />
      <!-- 工具栏 -->
      <van-tabs
        class="tool"
        v-model:active="pageData.menuType"
        line-width="0"
        line-height="0"
        :ellipsis="false"
        @click-tab="onClickTab"
      >
        <!-- 一等奖 -->
        <van-tab name="1">
          <template #title>
            <div
              class="items-center tool-menu-btn"
              :class="{ 'tool-menu-activity': pageData.menuType == 1 }"
            >
              <img
                v-if="pageData.menuType == 1"
                class="tool-menu-icon"
                src="/image/lottery-v3/result-ydj-icon.svg"
              />
              <div class="tool-time-text">{{ $t("lotteryMoney.ydj") }}</div>
            </div>
          </template>
        </van-tab>
        <!-- 二等奖 -->
        <van-tab name="2">
          <template #title>
            <div
              class="items-center tool-menu-btn"
              :class="{ 'tool-menu-activity': pageData.menuType == 2 }"
            >
              <img
                v-if="pageData.menuType == 2"
                class="tool-menu-icon"
                src="/image/lottery-v3/result-edj-icon.svg"
              />
              <div class="tool-time-text">{{ $t("lotteryMoney.edj") }}</div>
            </div>
          </template>
        </van-tab>
        <!-- 三等奖 -->
        <van-tab name="3">
          <template #title>
            <div
              class="items-center tool-menu-btn"
              :class="{ 'tool-menu-activity': pageData.menuType == 3 }"
            >
              <img
                v-if="pageData.menuType == 3"
                class="tool-menu-icon"
                src="/image/lottery-v3/result-sdj-icon.svg"
              />
              <div class="tool-time-text">{{ $t("lotteryMoney.sdj") }}</div>
            </div>
          </template>
        </van-tab>
        <!-- 参与奖 -->
        <van-tab name="50">
          <template #title>
            <div
              class="items-center tool-menu-btn"
              :class="{ 'tool-menu-activity': pageData.menuType == 50 }"
            >
              <img
                v-if="pageData.menuType == 50"
                class="tool-menu-icon"
                src="/image/lottery-v3/result-cyj-icon.svg"
              />
              <div class="tool-time-text">{{ $t("lotteryMoney.cyj") }}</div>
            </div>
          </template>
        </van-tab>
      </van-tabs>
      <!-- 表头 -->
      <div class="contentview-header items-center">
        <div class="contentview-header-qs">20{{ route.query.sessionId }}</div>
        <!-- 奖金 -->
        <div class="contentview-header-item" style="padding-right: 5px">
          <div
            v-if="totalPrizeAmount != null"
            class="contentview-header-item-value"
          >
            {{ Number(pageData.menuType) < 3 ? "$" : ""
            }}{{
              toThousands(
                Number(pageData.menuType) < 3
                  ? decimalToLength(totalPrizeAmount)
                  : new Decimal(totalPrizeAmount || 0).mul(1000)
              )
            }}
            {{ Number(pageData.menuType) < 3 ? "" : "BDC" }}
          </div>
          <div v-else class="contentview-header-item-value">
            {{ $t("lotteryMoney.jsz") }}
          </div>
          <div class="contentview-header-item-text">
            {{
              $t(
                Number(pageData.menuType) < 3
                  ? "lotteryMoney.ljjj"
                  : "lotteryMoney.ljzjbdc"
              )
            }}
          </div>
        </div>

        <!-- 注数 -->
        <div class="contentview-header-item" style="padding-left: 5px">
          <div class="contentview-header-item-value">
            {{ totalPrizeDrawCount || 0 }} {{ $t("lotteryMoney.xxz") }}
          </div>
          <div class="contentview-header-item-text">
            {{ $t("lotteryMoney.ljzs") }}
          </div>
        </div>
      </div>
      <!-- 内容部分 -->
      <div
        class="contentview hideScrollBar"
        ref="contentviewRef"
        :style="{
          height: `calc(100vh - ${contentview_h}px)`,
        }"
        :class="{
          'contentview-notdata-bg':
            !pageData.loading && pageData.list.length === 0,
        }"
      >
        <!-- 暂无内容 -->
        <div
          v-if="!pageData.loading && pageData.list.length === 0"
          class="contentview-notdata items-center"
        >
          <img class="contentview-notdata-img" src="/image/notdate-icon.png" />
          <div class="contentview-notdata-desc">{{ t("mvp.other.zwnr") }}</div>
        </div>
        <!-- 列表 -->
        <van-list
          v-else
          v-model:loading="pageData.loading"
          :finished="pageData.finished"
          :finished-text="t('mvp.other.text4')"
          :loading-text="t('mvp.other.text11')"
          @load="onLoadList"
        >
          <!-- 列表 -->
          <WinningCell
            style="position: relative; z-index: 9"
            :list="pageData.list"
            :cellType="pageData.menuType"
          ></WinningCell>
        </van-list>
      </div>
    </ClientOnly>
  </div>
</template>
<script setup name="dayWinningDetails">
import { navigateI18nTo } from "@/utils";
import { useGlobalStore } from "~~/store/global";
import { getSessionPrizeRecord } from "../../api/lottery";
import WinningCell from "@/components/lottery-v3/day-winning-details-cell.vue";
import Decimal from "decimal.js";

const { t } = useI18n();
const route = useRoute();
console.log("页面参数:", route.query);

const globalStore = useGlobalStore();
// 如果没有登录-直接跳转登录页面
if (!globalStore.$state.token && process.client) {
  bridge.onAppLogin();
}

// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 页面属性
const pageData = reactive({
  isSHowPicker: false,
  navBarHeight: 0,
  // 上拉加载属性
  loading: false,
  finished: false,
  list: [],
  pageNum: 0,
  menuType: 1, // 1： 一等奖 2： 二等奖 3.三等奖 50 参与奖
});

/**
 * @description: 上啦加载
 * @param {*} isRetry 重试一次
 * @author: zhj1214
 */
const contentview_h = ref(200);
const contentviewRef = ref();
const onLoadList = (isRetry) => {
  pageData.pageNum += 1;
  getSessionPrizeRecordRequest((isAdd) => {
    if (!isAdd) {
      pageData.pageNum -= 1;
      if (!isRetry) {
        setTimeout(() => {
          onLoadList(true);
        }, 3000);
      }
    }

    // 获取内容高度
    if (contentviewRef.value && !contentview_h.value) {
      let rect = contentviewRef.value.getBoundingClientRect();
      // console.log("--结束的锚点:", rect);
      contentview_h.value = rect.top;
    }
  });
};

// 获取列表数据
const totalPrizeDrawCount = ref(0); // 累计下注数量
const totalPrizeAmount = ref(0); // 累计美金
let lastDrawTime = undefined; // 上次最后一条记录下注时间
let pageSize = 20;
const getSessionPrizeRecordRequest = async (call) => {
  pageData.loading = true;
  const res = await getSessionPrizeRecord({
    sessionId: route.query.sessionId,
    prizeLevel: pageData.menuType,
    pageSize: pageData.menuType == 1 ? 999 : pageSize, // 一等奖全量获取
    lastDrawTime: lastDrawTime,
  });
  pageData.loading = false;

  console.log("--获取列表数据--", res);
  if (res) {
    totalPrizeDrawCount.value = res.totalPrizeDrawCount;
    totalPrizeAmount.value = res.totalPrizeAmount;

    if (res.records && res.records.length > 0) {
      if (pageData.pageNum == 0) {
        pageData.list = res.records;
        lastDrawTime = res.records[res.records.length - 1].drawTime;
      } else {
        pageData.list = pageData.list.concat(res.records);
        lastDrawTime = res.records[res.records.length - 1].drawTime;
      }
      // 去重: 由于按照时间来进行分页,导致后端返回的数据可能重复,需要去重
      pageData.list = Array.from(
        new Map(
          pageData.list.map((item) => [`${item.sid}${item.id}`, item])
        ).values()
      );
    }

    if (res.records.length <= 0 || res.records.length < pageSize) {
      pageData.finished = true;
    } else {
      pageData.finished = false;
    }

    if (res.records && res.records.length > 0) {
      call && call(true);
    } else {
      call && call(false);
    }
  } else {
    pageData.finished = true;
    call && call(false);
  }
};

onMounted(() => {
  // 1. 埋点访问
  firebase?.logEvent("BDC_H5_lottery_MyBet_V3_PUV");
  // 2. 请求数据
  onLoadList();
});

/**
 * @description: tab 切换
 */
let menuTypeLast = 1;
const onClickTab = ({ name }) => {
  // console.log("name:", name);
  // 1. 是否重置数据
  if (Number(name) !== menuTypeLast) {
    pageData.list = [];
    pageData.finished = false;
    lastDrawTime = undefined;
  } else {
    return;
  }
  // 2. 赋值、请求新数据
  pageData.pageNum = 0;
  menuTypeLast = Number(name);
  getSessionPrizeRecordRequest();
};

const jumpPage = () => {
  firebase?.logEvent("BDC_H5_V3_Jump_dayWinningDetails_PUV");
  navigateI18nTo({
    path: "/lottery-money/my-bet-record",
    query: {
      sessionId: route.query.sessionId,
    },
  });
};
</script>
<style lang="scss" scoped>
.dayWinningDetails {
  min-height: 100vh;
  background-color: #f4f5f7;
  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 300 * 2px;
    width: 100vw;
    background: linear-gradient(
      180deg,
      #96c9ff 0%,
      rgba(226, 236, 255, 0.3) 100%
    );
  }

  .tool {
    position: relative;
    width: 100vw;
    height: 42 * 2px;
    background: linear-gradient(
      270deg,
      rgba(223, 237, 255, 0) 0%,
      #dfedff 50.12%,
      rgba(223, 237, 255, 0) 100%
    );
    :deep(.van-tabs__nav) {
      background: none;
    }

    &-menu {
      &-btn {
        text-wrap: nowrap;
        white-space: nowrap;
        font-size: 13 * 2px;
        color: #a0adbc;
        font-weight: 510;
        // padding: 6px 8 * 2px;
      }
      &-icon {
        width: 24 * 2px;
        height: 24 * 2px;
        margin-right: 10 * 2px;
      }
      &-activity {
        color: #fff;
        background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
        border-radius: 4 * 2px;
        padding: 2 * 2px 8 * 2px;
      }
    }

    &-hashpk {
      height: 100%;
      min-width: 88 * 2px;
      justify-content: center;
      box-shadow: -5px 0px 22 * 2px rgba(0, 0, 0, 0.08);

      &-absolute {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9;
      }
      &-text {
        font-size: 13 * 2px;
        color: #141924;
        font-weight: 510;
        white-space: nowrap;
      }
      &-icon {
        width: 8 * 2px;
        height: 8 * 2px;
        margin-left: 4 * 2px;
      }
    }
  }
  .contentview {
    padding-bottom: var(--safe-area-inset-bottom);
    background-color: #fff;
    overflow-y: scroll;
    position: relative;
    border-top-left-radius: 12 * 2px;
    border-top-right-radius: 12 * 2px;
    width: 100%;

    &-header {
      position: relative;
      height: 64 * 2px;
      margin: 20 * 2px 15 * 2px 0 15 * 2px;
      padding: 12 * 2px 10 * 2px;
      border-radius: 12 * 2px 12 * 2px 0px 0px;
      background: linear-gradient(90deg, #007bff 0%, #00b2ff 100%);

      &-qs {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);

        border-radius: 100px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(10px);
        padding: 2 * 2px 10 * 2px;

        color: #007bff;
        font-size: 13 * 2px;
        font-weight: 590;
      }

      &-item {
        width: 50%;
        &-value {
          width: 100%;
          text-align: center;
          white-space: nowrap;
          margin-bottom: 4 * 2px;
          color: #fff;
          font-size: 14 * 2px;
          font-weight: 590;
        }
        &-text {
          width: 100%;
          text-align: center;
          // white-space: nowrap;
          color: rgba(255, 255, 255, 0.7);
          font-size: 12 * 2px;
        }
      }
    }
    &-notdata {
      justify-content: center;
      flex-direction: column;
      position: relative;
      top: 120 * 2px;
      &-img {
        width: 200 * 2px;
        height: 200 * 2px;
      }
      &-desc {
        margin-top: -35 * 2px;
        color: #999da7;
        font-size: 13 * 2px;
      }
      &-bg {
        background-color: #fff !important;
      }
    }
  }
}
</style>
